<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="$t('activity.list')" :border-bottom="false" :backText="$t('common.return')"></fa-navbar>

		<view class="wrap">
			<scroll-view scroll-y style="height: 100%;width: 100%;" refresher-default-style="black"
				@scrolltolower="reachBottom" :scroll-with-animation='true' :refresher-enabled="refresherEnabled"
				:refresher-triggered="triggered" :refresher-threshold="45" refresher-background="lightgreen"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort">
				<view class="cardBox" v-for="(item, index) in activity" :key="index"
					@click="goPage('/pages/activity/detail?id=' + item.id)">
					<view class="cardContent">
						<!-- {{ card.content }} -->
						<view class="contentLeft">
							<view class="LeftTop">
								<image :src="item.images" mode=""></image>

							</view>
							<view class="LeftBotton">

							</view>
						</view>
						<view class="contentRight">
							<view class="RightTop">

								<view class="top2">
									{{item.start_date}} - {{item.end_date}} · {{item.weeks}} {{$t('activity.weeks')}}
								</view>
								<view class="top3">
									{{item.title}}
								</view>
							</view>
							<view class="RightBotton">
								<view class="botton1">
									{{item.content}}
								</view>
								<view class="botton2">
									<view class="Dli">
										{{item.bet}}
										<br>
										{{$t('activity.bet')}}
									</view>
									<view class="Dli">
										{{item.total_number}}
										<br>
										{{$t('activity.players')}}
									</view>
									<view class="Dli">
										R${{item.prize_pool.toLocaleString("pt-BR")}}
										<br>
										{{$t('activity.pot')}}
									</view>
								</view>
							</view>
						</view>

						<view class="iconRight">
							<u-icon name="arrow-right" color="#107c10" size="35" bold
								@click="goPage('/pages/activity/detail?id='+item.id)"></u-icon>
						</view>
					</view>

				</view>
				<!-- 空数据 -->
				<view class="u-flex u-row-center fa-empty top-15" v-if="!activity.length">
					<image src="../../static/image/data.png" mode=""></image>
					<view class="u-tips-color">{{$t('activity.list.nomore')}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="activity.length"><u-loadmore bg-color="#f4f6f8"
				:status="has_more ? status : 'nomore'" :loadText="loadText" /></view>
		<view class="u-p-b-80"></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
			:custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 搜索 -->
		<view class="searchSty">
			<u-search class="usearch" bgColor="#fff" height="60" searchIconSize="45"
				:placeholder="$t('common.search.text')" v-model="keyword" shape="round" :showAction="true"
				@search="search" @custom="search" :actionStyle="{width: '60px'}" :actionText="$t('common.search')"></u-search>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e) {

			this.keyword = e.keyword || '';
			this.getActivities();
		},
		data() {
			return {
				refresherEnabled: true,
				triggered: false,
				activity: [],
				scrollTop: 0,
				status: 'loadmore',
				is_update: false,
				has_more: false,
				page: 1,
				keyword: '',
				query: {},
				
			};
		},
		computed: {
			
			loadText() {
				return {
					loadmore: this.$t('common.load.loadmore'),
					loading: this.$t('common.load.loading'),
					nomore: this.$t('common.load.nomore')
				}
			}
		},
		methods: {
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				//console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				// this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				this.triggered = true;
				this.page = 1;
				this.is_update = true;

				this.getActivities();
				console.log("onRefresh");

			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			search(e) {
				this.page = 1;
				this.is_update = true;
				this.keyword = e;
				this.getActivities();
			},
			reachBottom() {
				if (this.has_more) {
					this.status = 'loading';
					this.page++;
					this.getActivities();
				}
			},
			getActivities() {
				this.$api.activityLists({
					page: this.page,
					keyword: this.keyword,
					...this.query
				}).then(res => {
					if (res.code == 1) {
						if (this.is_update) {
							this.activity = [];
							this.is_update = false;
						}
						this.activity = [...this.activity, ...res.data.data];
						this.has_more = res.data.current_page < res.data.last_page;
					}
					this.triggered = false;
				});
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getActivities();
			}
		} */
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}
</style>
<style lang="scss" scoped>
	.cardBox {
		width: 100%;
		min-height: 150px;
		border-bottom: 1px #d2d0ce solid;
		box-sizing: border-box;

		.cardContent {
			padding: 10px;
			display: flex;

			.contentLeft {
				width: 25%;

				.LeftTop {

					image {
						width: 100%;
						height: 80px;
						border-radius: 8px;
					}
				}

				.LeftBotton {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #ff8c00;
					padding: 0 8px;
				}
			}

			.contentRight {
				width: 65%;
				padding: 0 10px;

				.RightTop {
					width: 100%;

					.top1 {
						color: #ff8c00;
						font-size: 14px;
					}

					.top2 {
						color: #605e5c;
						font-size: 12px;
					}

					.top3 {
						color: #000000;
						font-size: 15px;
						font-weight: bold;
					}
				}

				.RightBotton {
					width: 100%;

					.botton1 {
						font-size: 12px;
					}

					.botton2 {
						font-size: 12px;
						display: flex;
						justify-content: center;
						margin-top: 8px;

						.Dli {
							text-align: center;
							margin-right: auto;
						}
					}
				}

			}

			.iconRight {
				width: 10%;
				// height: 156px;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}
	}

	.searchSty {
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 50px;
		background-color: #dff6dd;
		z-index: 1000;

	}

	.usearch {
		line-height: 50px;
		padding: 0 10px;
	}
</style>